import React from 'react';
import styles from './index.module.scss';
import clusterImg from '../../../assets/cluster/cluster-down.png';
import Typography from '../../../components/typography';
import StudyStyle from '../../../components/study-style';
import StudyStyleTitle from '../../../components/study-style/study-style-title';
import ClusterMulti from '../../../assets/cluster/cluster-multi.png';
import RecommentHeadImg from '../../../assets/result-page-img/recomment/recomment-head';
import RecommentHandle from '../../../components/recomment-handle';
import Footer from '../footer';
const { Header } = Typography;

const Multi = ({ type, data }) => {
  console.log('Mutil中的data',data);
  return (
    <div className={styles.multi}>
      <div className={styles.mainStyle}>
        <div className={styles.title}>
          <div className={styles.styleTest}>专属学习风格测试</div>
          <div className={styles.dnRecomment}>丹尼推荐</div>
        </div>
        <div className={styles.main}>
          <img src={clusterImg} alt="" className={styles.cluster} />
          <div className={styles.pie}></div>
        </div>
        <Header type="result_main_title">你的主导学习风格为</Header>
        <div>
          <StudyStyleTitle
            type={type}
            size="big"
            isShow={true}
            multi={true}
          ></StudyStyleTitle>
        </div>
        <div className={styles.totalTitle}>
          你的测试结果涵盖多个占比相近的学习风格，具体如下：
        </div>
        <img src={ClusterMulti} alt="" className={styles.clusterMulti} />
      </div>
      <div className={styles.multiFirst}>
        <StudyStyle
          type={type}
          size="small"
          isShow={false}
          data={data[0].type}
          percent={data[0].percent}
        ></StudyStyle>
        <img
          src={RecommentHeadImg['recomment_' + type]}
          alt=""
          className={styles.recommentImg}
        />
        <Header type="recommentTitle">
          根据测试结果，系统为你匹配了适合的学习产品：
        </Header>
        <RecommentHandle type={data[0].type} style={type} />
      </div>
      <div>
        <StudyStyle
          type={type}
          size="small"
          isShow={false}
          data={data[1].type}
          percent={data[1].percent}
        ></StudyStyle>
        <img
          src={RecommentHeadImg['recomment_' + type]}
          alt=""
          className={styles.recommentImg}
        />
        <Header type="recommentTitle">
          根据测试结果，系统为你匹配了适合的学习产品：
        </Header>
        <RecommentHandle type={data[1].type} style={type} />
      </div>
      <Footer data={data} index={2} type={type} percent={data[2].percent}/>
      <Footer data={data} index={3} type={type} percent={data[3].percent} />
    </div>
  );
};

export default Multi;
